<template>
  <div class="left-container">
    <div class="left-btns flex-direction-column">
      <el-badge :value="likeCount" :class="['item', likeCount === 1 ? 'active' : '']">
        <el-button size="small" circle title="点赞" @click="clickLike">
          <i class="iconfont icon-icon"></i>
        </el-button>
      </el-badge>
      <el-badge :value="favoriteCount" :class="['item', favoriteCount === 1 ? 'active' : '']">
        <el-button size="small" circle title="收藏" @click="clickFavorite">
          <i class="iconfont icon-shoucang"></i>
        </el-button>
      </el-badge>
      <el-badge :value="followCount" :class="['item', followCount === 1 ? 'active' : '']">
        <el-button size="small" circle title="关注" :disabled="user_id === authorId" @click="clickFollow">
          <i class="iconfont icon-xihuan"></i>
        </el-button>
      </el-badge>
    </div>
  </div>
</template>

<script>
import { likeArticle, collectArticle, followAuthor } from '@/api/action'
import { isUserLoggedIn } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'LeftBtn',
  props: {
    articleDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      likeCount: 0,
      followCount: 0,
      favoriteCount: 0,
      authorId: '',
      left_action: {}
    }
  },
  watch: {
    articleDetail(newval) {
      this.likeCount = newval.like_num
      this.followCount = newval.author.follow_num
      this.favoriteCount = newval.favorite_num
      this.left_action = newval.left_action
      this.authorId = newval.author._id
    }
  },
  computed: {
    articleId() {
      return this.$route.params.id
    },
    ...mapGetters(['user_id'])
  },
  methods: {
    // 点赞文章
    async clickLike() {
      if (!isUserLoggedIn()) {
        this.$message.error('请先登录')
        return false
      }
      try {
        const res = await likeArticle(this.articleId)
        if (res.code === 200) {
          if (res.data.like === 1) {
            this.likeCount += 1
            this.left_action.isLike = 1
            this.$message.success({
              message: '点赞成功',
              offset: 80
            })
          } else {
            if (this.likeCount > 0) {
              this.likeCount -= 1
              this.left_action.isLike = 0
              this.$message.success({
                message: '取消点赞成功',
                offset: 80
              })
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 收藏文章
    async clickFavorite() {
      if (!isUserLoggedIn()) {
        this.$message.error('请先登录')
        return false
      }
      try {
        const res = await collectArticle(this.articleId)
        if (res.code === 200) {
          if (res.data.favorite === 1) {
            this.favoriteCount += 1
            this.left_action.isfavorite = 1
            this.$message.success({
              message: '收藏成功',
              offset: 80
            })
          } else {
            if (this.favoriteCount > 0) {
              this.favoriteCount -= 1
              this.left_action.isfavorite = 0
              this.$message.success({
                message: '取消收藏成功',
                offset: 80
              })
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 关注作者
    async clickFollow() {
      if (!isUserLoggedIn()) {
        this.$message.error({
          message: '请先登录',
          offset: 80
        })
        return false
      }
      if (this.user_id === this.authorId) {
        this.$message.error({
          message: '不能关注自己',
          offset: 80
        })
        return false
      }
      try {
        const res = await followAuthor(this.authorId)
        if (res.code === 200) {
          if (res.data.follow === 1) {
            this.followCount += 1
            this.left_action.isfollow = 1
            this.$message.success({
              message: '关注成功',
              offset: 80
            })
          } else {
            if (this.followCount > 0) {
              this.followCount -= 1
              this.left_action.isfollow = 0
              this.$message.success({
                message: '取消关注成功',
                offset: 80
              })
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left-container {
  margin-top: 30px;
}

.left-btns {
  position: sticky;
  top: 30px;
  .item {
    margin-bottom: 15px;
    border-radius: 50%;
    box-shadow: #adadad 0px 0px 10px 0px;
    &.active {
      box-shadow: 0 0 0 2px rgba(255, 192, 203);
    }
  }
  .iconfont {
    font-size: 20px;
  }
}
</style>
